<template>
  <button 
    class="custom-button"
    :class="[
      `btn-${type}`,
      `btn-${size}`,
      { 'btn-disabled': disabled },
      { 'btn-loading': loading }
    ]"
    :disabled="disabled || loading"
    @tap="handleClick"
  >
    <u-loading-icon v-if="loading" size="20" color="#fff" />
    <text v-else>{{ text }}</text>
  </button>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'success', 'warning', 'danger'].includes(value)
  },
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = (e) => {
  if (!props.disabled && !props.loading) {
    emit('click', e)
  }
}
</script>

<style lang="scss" scoped>
.custom-button {
  border: none;
  border-radius: 8rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &.btn-small {
    padding: 12rpx 24rpx;
    font-size: 24rpx;
}
  
  &.btn-medium {
    padding: 20rpx 40rpx;
    font-size: 28rpx;
}
  
  &.btn-large {
    padding: 28rpx 56rpx;
    font-size: 32rpx;
    width: 100%;
}
  
  &.btn-primary {
    background: linear-gradient(135deg, #ff6b81, #ff8a95);
    color: #fff;
    
    &:active {
      background: linear-gradient(135deg, #ff5252, #ff7979);
}
  }
  
  &.btn-secondary {
    background: #f8f9fa;
    color: #6c757d;
    border: 1rpx solid #dee2e6;
    
    &:active {
      background: #e9ecef;
}
  }
  
  &.btn-success {
    background: #00b894;
    color: #fff;
    
    &:active {
      background: #00a085;
}
  }
  
  &.btn-warning {
    background: #fdcb6e;
    color: #fff;
    
    &:active {
      background: #e17055;
}
  }
  
  &.btn-danger {
    background: #d63031;
    color: #fff;
    
    &:active {
      background: #e84393;
}
  }
  
  &.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
  
  &.btn-loading {
    opacity: 0.8;
    cursor: not-allowed;
}
}
</style>